import React from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import '../custom/customComponents.css'; // 引入自定义组件样式

interface CustomSpinProps {
  size?: 'small' | 'default' | 'large';
  style?: React.CSSProperties;
}

const CustomSpin: React.FC<CustomSpinProps> = ({ 
  size = 'default',
  style = {} 
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const getSize = () => {
    switch (size) {
      case 'small':
        return '12px';
      case 'large':
        return '24px';
      default:
        return '16px';
    }
  };

  return (
    <div
      className="custom-spin"
      style={{
        display: 'inline-block',
        width: getSize(),
        height: getSize(),
        border: `2px solid transparent`,
        borderTopColor: theme.glowColor,
        borderRadius: '50%',
        animation: 'spin 1s linear infinite',
        ...style
      }}
    />
  );
};

export default CustomSpin;